<template>
  <div class="panel-5 card-common-cls" :class="{'mask-cls': maskable}" @click="click2Drag">
    <div class="panel-5-box">
      <div class="panel-5-box-line" :style="{width: lineWidth + 'px', left: (marginLeft + 11.5) + 'px'}">
        <div :style="{width: curLineWidth}"></div>
      </div>

      <ul>
        <li :key="index" v-for="index in item.node_num" :style="{
            margin: '0 ' + marginLeft + 'px',
            borderColor: item.end_point == index - 1 || item.begin_point == index - 1 ? 'orange' : '#eee',
          }">
            <span v-if="item.end_point == index - 1" style="color: orange">{{item.current_text}}</span>
            <span v-if="0 == index - 1 && item.left_text">{{item.left_text}}</span>
            <span v-if="item.node_num == index && item.right_text">{{item.right_text}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      item: Object,
      maskable: {
        type: Boolean,
        default: true,
      },
    },
    computed: {
      width() {
        const _box = document.querySelector('.panel-5');
        return _box && (_box.style.width || _box.clientWidth || _box.offsetWidth || _box.scrollWidth) || 250;
      },
      marginLeft() {
        let _marginLeft = ((this.width - 16) / this.item.node_num - 7) / 2;
        return Math.floor(_marginLeft * 10) / 10;
      },
      lineWidth() {
        return this.marginLeft * 2 * (this.item.node_num - 1) + (this.item.node_num - 1) * 7;
      },
      curLineWidth() {
        return (this.item.end_point - this.item.begin_point) * (this.marginLeft * 2 + 7) + 'px';
      },
    },
    methods: {
      click2Drag() {
        // console.log(e);
      },
    },
  }
</script>

<style lang="scss" scoped>
  .mask-cls::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    z-index: 999;
  }

  .card-common-cls {
    position: relative;
    width: 100%;
    max-width: 375px;
    z-index: 0;

    .panel-5-box {
      position: relative;

      >ul {
        position: relative;
        display: block;
        width: 100%;
        height: 40px;
        padding: 8px;

        >li {
          float: left;
          width: 7px;
          height: 7px;
          border-radius: 7px;
          border: 2px solid #ddd;
          // border: 2px solid orange;
          background: #fff;
          display: flex;
          justify-content: center;

          &:first-child {
            border-color: orange;
          }

          >span {
            margin-top: 7px;
            font-size: 12px;
            color: #a0a0a0;
          }
        }
      }

      .panel-5-box-line {
        position: absolute;
        top: 10px;
        height: 3px;
        background: #ddd;

        >div {
          // width:
          height: 100%;
          background: orange;
          transition: all .3s ease;
        }
      }
    }
  }
</style>
